<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>我的计时</title>
	<!-- 个人中心通用样式  -->
	<%@ include file="/common/center-main-css.jsp"%>
    
    <!-- datepicker -->
    <link href="${ctx}/resource/v2/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="${ctx}/resource/v2/css/datepicker3.css" rel="stylesheet">
</head>
<body>
	<!-- 菜单及导航数据  -->
    <data id="info" nav="timer" menu="myTimers" service="计时服务" action="我的计时">

	<!-- 业务部分  开始  -->
    <div class="row wrapper border-bottom white-bg page-heading animated zoomIn min-height">
       	<div class="row">
         <div class="col-lg-12">
             <div class="ibox float-e-margins">
                 <div class="ibox-title">
                     <h5>我的计时 <small class="text-navy">积极参与，这是你应该发起的计时</small></h5>
                     <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">Config option 1</a>
                                </li>
                                <li><a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                 </div>
                 <div class="ibox-content">
                     <form class="form-horizontal" id="searchForm" method="post">
						<div class="form-group">
							<label class="col-sm-1 control-label">计时标题</label>
							<div class="col-sm-3">
								<input name="title" type="text" class="form-control" placeholder="输入计时标题进行搜索">
							</div>
							<label class="col-sm-1 control-label">创建时间</label>
							<div class="col-sm-4">
								<div class="row">
                                   <div id="data_1" class="col-md-6">
                                      <div class="input-group date">
										<span class="input-group-addon">
										<i class="fa fa-calendar"></i></span>
										<input name="createTime"  type="text" class="form-control" placeholder="创建日期">
									</div>
                                  </div>
                                </div>
							</div>
						 	<div class="col-sm-3">
                               <button type="button" id="searchBtn" class="btn btn-primary">搜索</button>
                               <button type="reset" class="btn btn-white">重置</button>
                            </div>
						</div>
                        <table class="table table-responsive table-hover text-center">
                            <thead>
                             <tr class="info" style="font-weight: bold;">
                                 <td>编号</td>
                                 <td>计时主题</td>
                                 <td>计时次数</td>
                                 <td>创建时间</td>
                                 <td>删除</td>
                             </tr>
                         </thead>
                         <tbody id="table-data">
                            
                         </tbody>
                        </table>
                        
                        <div id="laypageId" class="text-right">
                        	
                        </div>
                        
                       </form>
					</div>
             </div>
         </div>
     </div>
    </div>
	
	      
	<js>
    <!-- 业务JS -->
    <!-- Color picker -->
    <script type="text/javascript" src="${ctx}/resource/v2/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="${ctx}/resource/v2/js/bootstrap-colorpicker.min.js"></script>
	
	<!-- laypage -->
	<script type="text/javascript" src="${ctx}/resource/v2/laypage/laypage.js"></script>
	<script type="text/javascript" src="${ctx}/resource/v2/laypage/laytpl.js"></script>
    <!-- iCheck -->
    <script src="${ctx}/resource/v2/js/icheck.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
    </script>
    <script>
        //datepicker
        $('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            todayHighlight: true,
        	language: "zh",
        	format: "yyyy-mm-dd",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
        });
        $('#data_2 .input-group.date').datepicker({
            todayBtn: "linked",
            todayHighlight: true,
        	language: "zh",
        	format: "yyyy-mm-dd",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });
        
        $("#searchBtn").on('click', function(){
        	dataList.getPageList(1);
        })
       
       
     	//删除操作
		function deleteTimer(tid) {
			layer.confirm('确定要删除吗？', {
				   btn: ['确定','取消']
				 }, function(){
					 $.ajax({
						type : 'post',
						url : '${ctx}/timer/delete.do?tid=' + tid,
						cache : false,
						dataType : 'json',
						success : function(data) {
							layer.msg(data.msg);
							if (data.flag) {
								dataList.getPageList(1);
							}
						}
					});
		 	});
		}
		
       	var dataList = {
     		getPageList:function(curr){
				var load = layer.load(0);
	  			$.ajax({
	   				type: "post",
	   				url: "${ctx}/center/timer/list.do",
	   				data: $("#searchForm").serialize()+"&currentPage="+curr,
	   				dataType:"json",
	   				success:function(data){
	   					var tpl = document.getElementById("dataListTpl").innerHTML;;
	   					laytpl(tpl).render(data.resultMap, function(dom){
	   						$("#table-data").html(dom);
	  	 					//document.getElementById("dataListTBodyId").innerHTML=html;
	   					});
	   					//显示分页
	   			        laypage({
	   			            cont: 'laypageId', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
	   			            pages: data.page.totalPageCount, //通过后台拿到的总页数
	   			            curr: curr || 1, //当前页
	   			            skin: 'molv', //皮肤
	   			    	    first: 1, //将首页显示为数字1,。若不显示，设置false即可
	   			    	    last: false, //将尾页显示为总页数。若不显示，设置false即可
	   			    	    prev: '<', //若不显示，设置false即可
	   			    	    next: '>', //若不显示，设置false即可
	   			            jump: function(obj, first){ //触发分页后的回调
	   			                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
	   			                	dataList.getPageList(obj.curr);
	   			                }
	   			            }
	   			        });
	   			       layer.close(load);
	   				},
	  				error:function(d){
	  					layer.close(load);
	  					if(d.readyState == 0){
	  						layer.msg("服务器拒绝了我们的连接请求，请检查网络连接或者服务器是否启动", {time: 5000, icon:6});
	  					}
	  					console.log(JSON.stringify(d));
	  				}
	  			});
			}
   		};
       	
       	$(function(){
      		dataList.getPageList(1);
       	});
       	
      </script>
      <script id="dataListTpl" type="text/html">
  		{{# for(var i = 0; i<d.length; i++){ }}
			<tr>
				<td>{{i+1}}</td>
				<td title="{{ d[i].timerEvent.title }}">
					<a href="${ctx}/center/timer/result.html?tid={{ d[i].timerEvent.id }}">{{ d[i].timerEvent.title }}</a>
				</td>
				<td class="text-warning"><span class="badge badge-primary">{{ d[i].countNumber }}</span></td>
				<td>{{ d[i].createTime }}</td>
				<td>
					<a  class="delete" href="#" onclick="deleteTimer('{{ d[i].timerEvent.id }}')"><span class="badge badge-danger">删除</span></a>
				</td>
 			</tr>
  	    {{# }  }}
    </script>
    
    
    </js>
</body>

</html>
